<template>
  <div class="person">
    <el-table :data="list" :stripe="!butFlag" :border="butFlag" highlight-current-row v-loading="loading"
              :height="high">
      <template v-for="(item,index) in items">
        <template v-if="item.table">
          <template v-if="item.meth">
            <el-table-column :formatter="item.meth" key="index" :prop="item.prop" :label="item.label"
                             align="center"></el-table-column>
          </template>
          <template v-else-if="item.sty">
            <el-table-column key="index" :prop="item.prop" :label="item.label" align="center">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.state"
                  active-color="#13ce66"
                  inactive-color="#ff4949" @change="onSubmit(scope.$index, scope.row)">
                </el-switch>
              </template>
            </el-table-column>
          </template>
          <template v-else-if="item.img">
            <el-table-column key="index" :prop="item.prop" :label="item.label" align="center" :width="item.width">
              <template slot-scope="scope">
                <img :src="scope.row[item.prop]" style="width: 100%;height: 100px"/>
              </template>
            </el-table-column>
          </template>
          <template v-else>
            <el-table-column key="index" :prop="item.prop" :label="item.label" align="center"></el-table-column>
          </template>
        </template>
      </template>
      <template v-if="butFlag">
        <el-table-column
          fixed="right"
          label="操作"
          width="140" align="center">
          <template slot-scope="scope">
            <el-button-group>
              <el-button @click="update(scope.$index, scope.row)" type="success" size="mini" round>编辑</el-button>
              <el-button @click="dele(scope.$index, scope.row)" type="info" size="mini" round>删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
  //  import moment from 'moment'
  //  import Vue from 'Vue'
  export default {
    name: 'Commtab',
    data () {
      return {
        editForms: false,
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        content: '',
        editor: null
      }
    },
    props: {
      list: Array,
      loading: Boolean,
      butFlag: Boolean,
      items: Array,
      editForm: Object,
      rules: Object,
      high: Number,
      options: Array,
      editableTabsValue2: String,
      tabIndex: Number,
      editableTabs2: Array
    },
    methods: {
      update (index, row) {
        this.$emit('show', row)
        this.$emit('editTab', '')
      },
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
//            this.$emit('update', this.editForm)
//            this.editor.delEditor()
          }
        })
      },
      dele (index, row) {
        this.$confirm('此操作将永久删除该职位 , 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$emit('del', row)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      onSubmit (index, row) {
        this.$emit('update', row)
      },
      handlePreview (res, file) {
        this.editForm.imgUrl = res
      },
      contents (msg) {
        this.editForms = false
//        this.editForm.content = msg
//        this.submitForm('editForm')
      },
      beforeUp (file) {
        if (this.editForm.imgUrl === undefined) {
          const isJPG = file.type === 'image/jpg' || file.type === 'image/png'
          const isLt2M = file.size / 1024 / 1024 < 2
          var image = new Image()
          image.onload = function () {
//            var imgWidth = image.width
//            var imgHeight = image.height
//            var isSize = imgWidth / imgHeight === 5 / 3
          }
          var fr = new FileReader()
          fr.onload = function () {
            image.src = fr.result
          }
          fr.readAsDataURL(file)
          if (!isJPG) {
            this.$message.error('上传图片只能是 JPG/PNG 格式!')
          }
          if (!isLt2M) {
            this.$message.error('上传图片大小不能超过 2MB!')
          }
          return isJPG && isLt2M
        } else {
          this.$message.error('只能上传单张图片')
          return false
        }
      },
      remove (file, fileList) {
        this.editForm.imgUrl = undefined
      }
    }
  }
</script>
<style scoped>
  .el-dialog el-dialog--small {
    top: inherit;
  }

  .el-dialog__body {
    padding: 10px 30px;
  }

  .el-dialog {
    position: sticky !important;
  }

  .el-dialog__wrapper {
    margin: -40px auto;
  }
</style>
